<template>
  <div class="list">
    <!-- 搜索框组件 -->
    <van-sticky>
      <app-server class="server" />
    </van-sticky>
    <van-tree-select
      height="150vw"
      :items="items"
      :main-active-index.sync="active"
    >
      <template #content>
        <van-grid :column-num="3" :border="false">
          <van-grid-item v-for="item in goods" :key="item._id" class="goodsItem">
            <img :src="item.PictureUrl" alt="" />
            <p>{{ item.CategoryName }}</p>
          </van-grid-item>
        </van-grid>
      </template>
    </van-tree-select>
    <app-tabbar />
  </div>
</template>
<script>
import appTabbar from "../components/Tabbar";
import appServer from "../components/Server";
import Vue from "vue";
import { Sidebar, SidebarItem, TreeSelect } from "vant";
Vue.use(Sidebar);
Vue.use(SidebarItem);
Vue.use(TreeSelect);
export default {
  name: "List",
  components: {
    appTabbar,
    appServer,
  },
  data() {
    return {
      goodsList: "",
      items: [],
      goods: {},
      active: 0,
    };
  },
  methods: {
    getItems() {
      for (let key in this.goodsList) {
        if (this.goodsList[key].CategoryName) {
          this.items.push({ text: this.goodsList[key].CategoryName });
        }
      }
      this.goods = this.goodsList[this.active]["Childs"];
    },
  },
  watch: {
    active() {
      this.goods = this.goodsList[this.active]["Childs"];
    },
  },
  async created() {
    const { data } = await this.$request.get("/good/classify", {
      params: {
        size: 12,
      },
    });
    this.goodsList = data.data;
    console.log(data.data);
    this.getItems();
  },
};
</script>
<style lang="scss" scoped>
@import "../assets/sass/vw.scss";
 .goodsItem{
  width: vw(90.8);
  height: vw(85.8);
  img {
    width: vw(61.89);
    height: vw(61.89);
  }
 }

</style>
